<template>
  <div>
    <!-- 搜索 -->
    <Search
      :loading="queryloading"
      @Search="
        querylist.pagenum = 1;
        getordersList();
      "
      v-model="querylist.query"
    ></Search>
    <MyTable :data="list" :cols="cols" :total="total" v-model="querylist">
      <template v-slot:pay="{ row: { order_pay } }">
        <el-tag :type="order_pay ? 'success' : 'primary'"
          >{{ order_pay == "0" ? "未" : "已" }}付款</el-tag
        >
      </template>
      <template v-slot:time="{ row: { create_time } }">
        {{ new Date(create_time * 1000).format() }}
      </template>
      <template v-slot:action="{ row }">
        <el-button
          class="el-icon-edit"
          type="primary"
          circle
          @click="
            form = {};
            $refs.d.show();
          "
        ></el-button>
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="getTrandList()"
        ></el-button>
      </template>
    </MyTable>
    <DF lw="90px" :opts="opts" ref="d" title="修改地址" v-model="form"></DF>
    
    <Dialog title="物流信息" ref="dia">

      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in trandlist"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>

      <div slot="footer"></div>
    </Dialog>
  </div>
</template>
<script>
import city from "../../utils/city.js";
import { pageMixins } from "../../mixin/baseMixin.js";
import { getOrder, getTradeInfo } from "api/orders";
export default {
  mixins: [pageMixins],
  name: "Order",
  data() {
    return {
      form: "",

      /**
       * 物流
       */
      trandlist: [],

      opts: {
        address: {
          title: "省市区/县",
          required: true,
          tag: "cas",
          options: city,
        },
        detail: {
          title: "详细地市",
          required: true,
          width: 100,
        },
      },
    };
  },
  computed: {
    cols() {
      return [
        { title: "#", type: "index" },
        { title: "订单编号", name: "order_number" },
        { title: "订单价格", name: "order_price" },
        { title: "是否付款", name: "order_pay", slot: "pay" },
        { title: "是否发货", name: "is_send" },
        { title: "下单时间", name: "create_time", slot: "time" },
        { title: "操作", align: "center", slot: "action", width: 200 },
      ];
    },
  },
  methods: {
    async getordersList() {
      try {
        const { total, goods } = await getOrder(this.querylist);
        this.list = goods;
        this.total = total;
      } catch (error) {}
    },
    async getTrandList() {
      this.$refs.dia.show();
      try {
        this.queryloading = true;
        this.trandlist = await getTradeInfo();
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {
    this.getordersList();
  },
  mounted() {},
};
</script>
<style lang="scwss" scoped></style>
